@import "./lib/index.scss";
.index {
  .top {
    padding: 36px 0;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, .4));
    text-align: center;
    img {
      width: 80%;
      height: auto;
    }
  }
  .top-nav {
    height: 148px;
    background: #fff;
		border: 1px solid color(bc);
		border-left: none;
		border-right: none;
		display: flex;
		margin-bottom: $offset;
		a{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			font-size: fontSize(24);
			+a{
				border-left: 1px solid color(bc);
			}
		}
	}
	.menu{
		background: #fff;
		display: flex;
		flex-wrap: wrap;
		li{
			width: calc(100% / 3);
			display: flex;
			flex-direction: column;
			text-align: center;
			height: 160px;
			justify-content: center;
			border-bottom: 1px solid color(bc);
			border-right: 1px solid color(bc);
			.icon{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				img{
				
					max-width: 20%;
				}
			}
			&:nth-of-type(3n){
				border-right: none;
			}
			span{
				height: 50px;
				// margin-top: 24px;
				font-size: fontSize(24);
			}
		}
	}
	.popup{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	
		.avatar{
			width: 84px;
			height: 84px;
			margin-bottom: $offset;
			img{
				width: 100%;
			}
		}
		.content{
			width: 60%;
			text-align: center;
			// padding: 0 133px;
			img{
				width: 100%;
			}
			p {
				color: color(gray);
				margin-bottom: $offset;
			}
		
		}
		button{
			@include button;
		}
	}
}
